$baseMargin: 0.0625rem * 20;
$borderColor: #05397f;
// flex布局
.flex {
  display: flex;
}
.flex_dir_col {
  display: flex;
  flex-direction: column;
}
// 纵向排列且垂直居中
.flex_dir_col_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
// 水平垂直剧中
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
// 水平剧中
.flex-center-h {
  display: flex;
  justify-content: center;
}

// 垂直剧中
.flex-center-v {
  display: flex;
  align-items: center;
}

// 间隔布局
.flex-space-around {
  display: flex;
  justify-content: space-around;
}

// 两端布局
.flex-space-between {
  display: flex;
  justify-content: space-between;
}

// 垂直布局
.flex-column {
  flex-direction: column;
}

// 水平居右
.flex-end {
  display: flex;
  justify-content: flex-end;
}

// 垂直居右
.flex-end-v {
  display: flex;
  align-items: flex-end;
}

// flex 的子项 所占空间
@for $i from 1 through 10 {
  .flex-#{$i} {
    flex: $i;
  }
}
// 字体大小
@for $i from 12 through 50 {
  .font-#{$i} {
    font-size: 0.0625rem * $i;
  }
}
// 字体大小
@for $i from 1 through 12 {
  .font-#{$i} {
    font-size: 0.0625rem * $i;
    transform: scale(calc($i / 12));
  }
}
// margin
@for $i from 1 through 50 {
  .margin-#{$i} {
    margin: 0.0625rem * $i;
  }
}

@for $i from 1 through 500 {
  .margin-left-#{$i} {
    margin-left: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .margin-right-#{$i} {
    margin-right: 0.0625rem * $i;
  }
}

@for $i from 1 through 100 {
  .margin-top-#{$i} {
    margin-top: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .margin-bottom-#{$i} {
    margin-bottom: 0.0625rem * $i;
  }
}
// padding
@for $i from 1 through 50 {
  .padding-#{$i} {
    padding: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .padding-left-#{$i} {
    padding-left: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .padding-right-#{$i} {
    padding-right: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .padding-top-#{$i} {
    padding-top: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .padding-bottom-#{$i} {
    padding-bottom: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .border-radius-#{$i} {
    border-radius: 0.0625rem * $i;
  }
}

@for $i from 1 through 50 {
  .line-height-#{$i} {
    line-height: 0.0625rem * $i;
  }
}

@for $i from 1 through 499 {
  .w-#{$i} {
    width: 0.0625rem * $i;
  }
}

@for $i from 1 through 499 {
  .h-#{$i} {
    height: 0.0625rem * $i;
  }
}

.margin {
  margin: $baseMargin;
}

.margin-left {
  margin-left: $baseMargin;
}

.margin-right {
  margin-right: $baseMargin;
}

.margin-top {
  margin-top: $baseMargin;
}

.margin-bottom {
  margin-bottom: $baseMargin;
}

.padding {
  padding: $baseMargin;
}

.padding-left {
  padding-left: $baseMargin;
}

.padding-right {
  padding-right: $baseMargin;
}

.padding-bottom {
  padding-bottom: $baseMargin;
}

// 宽高
.w-h-100 {
  width: 100%;
  height: 100%;
}
.h-100 {
  height: 100%;
}
.w-100 {
  width: 100%;
}
.w-h-50 {
  width: 50%;
  height: 50%;
}
.h-50 {
  height: 50%;
}
.w-50 {
  width: 50%;
}

.border {
  border: 1px solid $borderColor;
}
.border-top {
  border-top: 1px solid $borderColor;
}
.border-bottom {
  border-bottom: 1px solid $borderColor;
}
.border-right {
  border-right: 1px solid $borderColor;
}
.border-left {
  border-left: 1px solid $borderColor;
}

.auto-scroll {
  overflow: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.text-center {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

.p-r {
  position: relative;
}
.p-a {
  position: absolute;
}
.p-left {
  position: absolute;
  left: 0;
  top: 0;
}
.p-right {
  position: absolute;
  right: 0;
  top: 0;
}
.p-top {
  position: absolute;
  top: 0;
  left: 0;
}
.p-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}
.p-0 {
  top: 0;
  left: 0;
}

.text-overflow {
  white-space: nowrap;
  /* 防止文本换行 */
  width: 100%;
  /* 容器宽度 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 使用省略号表示溢出 */
}

.bg-default {
  background-color: #021041;
}

.b-s-100 {
  background-size: 100% 100%;
}

.b-s-50 {
  background-size: 50% 50%;
}

.white {
  color: #fff;
}
